
<template>
    <div class="ChatRoomAisde">
          <div class="SearchBox">
            <div class="SearchBoxLeft">
      <el-input
      placeholder="请输入内容"
      prefix-icon="el-icon-search"
      v-model="input2"
      class="custom-input"
      >
     </el-input>
            </div>
 
     <div class="SearchBoxRight">
      <i class="el-icon-circle-plus-outline"></i>
     </div>

        </div>


        <div class="MessageDropdownBox"> 
      <div class="MessageDropdownBoxLeft">
      <span>最近</span>
     </div>
        
      <div class="MessageDropdownBoxRight">
      <i class="el-icon-caret-bottom"   @click="toggleMessageList"></i>
     </div>
        </div>


        <div class="MessageListBox"> 


          <MessageList v-show="showMessageList"></MessageList>
            
        </div>

       <div class="feedFilterMask" :class="{ model: isExpanded }"></div>

        <div class="FooterOpen" :class="{ show: isExpanded }">
      
          <div class="topBox">

            <div class="LeftBox" @click="toggleExpand">
            <i class="el-icon-chat-round"></i>
            <span style="padding: 3px;">收件箱</span>
          </div>
           
          <div class="RightBox" @click="toggleExpand">
            <span>全部消息</span>
            <i class="el-icon-caret-top"></i>
          </div>
          
          </div>
        
          <div class="footerBox">

            <div class="bottom_box">
            <i class="el-icon-chat-round"></i>
            <span style="padding: 3px;">收件箱</span>
          </div>
          <div class="bottom_box" >
            <i class="el-icon-chat-round"></i>
            <span style="padding: 3px;">收件箱</span>
          </div>
          <div class="bottom_box" >
            <i class="el-icon-chat-round"></i>
            <span style="padding: 3px;">收件箱</span>
          </div>

          </div>
        
        </div>

  
    </div>
  </template>
  <script>
  
  import MessageList from './MessageList.vue'

  export default {
    data() {
      return {
     input2:'',
     showMessageList: true,
     isExpanded: false,
      };
    },
    components:{
     MessageList,
    },
    methods: {
      //折叠
      toggleMessageList() {
      this.showMessageList = !this.showMessageList;
    },
    //底部折叠
    toggleExpand() {
      this.isExpanded = !this.isExpanded;

    }
    }
  
  }
  </script>
  
  <style scoped>
.ChatRoomAisde{
   position: relative;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #cdcccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); 
}
.custom-input {
  width: 250px;
}
   .SearchBox{
    height: 40px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
   }

  .MessageDropdownBox{
    height: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .MessageListBox{
  
    height: 100%;
  }
  .topBox{
    height: 30px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #cdcccc;
   
  }

 .FooterOpen{
  width: 100%;
  height: 50px;
  position: absolute;
  z-index: 3;
  bottom: 0;
  transition: height 0.5s ease-out;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); 
 }
 .feedFilterMask{
  width: 100%;
  position: absolute;
  z-index: 3;
  bottom: 0;
  background-color: #121111;
 }

 .show{
   height: 250px;
 }
 .model{
  top: 0;
  background-color: #fff;
  opacity: .85;

 }

 .bottom_box{
  height: 30px;
  padding:5px 10px 5px 10px;
  display: flex;
  align-items: center;
 }

 .bottom_box:hover{
  background-color: rgba(225, 227, 230);
 }
  </style>